<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>setup上下文对象</title>
    <style>
        .cls {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="button" value="修改作者" @click="changeAuthor">
        <!-- 3、把响应式对象赋给ref属性 -->
        <book ref="bookcom"></book>
    </div>
</body>
<script src="./js/vue.global.js"></script>
<script>

    const { createApp, ref, onMounted } = Vue

    // 子组件
    let book = {
        template: `            
                <h1>书籍组件</h1>
                <div>
                    <p>str:{{str}}</p>
                    <p>msg:{{msg}}</p>

                </div>
        `,
        setup(props, context) {
            // 4、expose();// 是组件对外开放的属性和方法，
            // 1）、选项式api中，通过this.$refs.refName 可以拿到子组件（的this），那么，就可以直接访问子组件提供一切属性和方法。
            // 2）、现在在组合式api中，expose可以限制对外开发子组件的哪些属性和方法。
            // 3）、如果使用了expose后，那么，写在选项式api中的属性和方法就不能使用。


            let msg = ref("hi");
            let str = ref("hello");

            function handle02(){
                console.log("handle02");
            }

            //  context.expose：对本组件之外的开放，父组件可以使用这些属性和方法
            context.expose({
                str,
                handle02
            })

            // setup的返回值：本组件内部开放，开放给本组件的其它配置项和模板上。
            // setup的返回值，可以在本组件里使用（本组件的模板上，和本组件的其它配置项里）
            return {
                msg,str,handle02
            }
        },
        methods:{
            handle01(){
                console.log("handle01");
            }
        }
    }


    const app = createApp({
        components: { book },
        methods: {
            fn() {
                // 在选项式api中，获取子组件对象的方式：
                // this.$refs.child
            }
        },
        setup() {
            // 在组合式api中，如何通过ref，拿到子组件对象
            //   1、定义一个响应式对象
            let bookcom = ref();


            //   在模板初次渲染完毕时：
            onMounted(() => {
                console.log("bookcom", bookcom);//是子组件对象。
                console.log("bookcom.value.msg",bookcom.value.msg);
                console.log("bookcom.value.str",bookcom.value.str);
                bookcom.value.handle02();
                // bookcom.value.handle01();//不能使用，
            })

            return {
                // 2、把响应式对象对外开发
                bookcom
            }

        },
    })



    app.mount('#app')
</script>

</html>